<template>
  <div class="merchant-platform-container">
    <BasicTable @register="registerTable" class="table-container">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'shopName'">
          <div class="image-text">
            <div class="img">
              <Image :src="record.logoUrl" width="48px" height="48px"></Image>
            </div>
            <div class="text">
              <Tooltip :title="record.shopName">
                <span>{{ record.shopName }}</span>
              </Tooltip>
            </div>
          </div>
        </template>
        <template v-if="column.key === 'memberMerchantNo'">
          <Button type="link" @click="handleToMerchant(record)"> 查看</Button>
        </template>
        <template v-else-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '编辑',
                onClick: () => handleAdd(2, record),
              },
              record.merchantNo
                ? {
                    label: '支付绑定',
                    onClick: () => openBind(record),
                  }
                : {},
            ]"
          />
        </template>
      </template>
      <template #toolbar>
        <a-button type="primary" @click="handleAdd(1)">开通资源平台</a-button>
      </template>
    </BasicTable>
    <OpenGoods @register="register" @reload="reload"></OpenGoods>
    <Modal
      title="修改APPID绑定"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleBind"
      :z-index="99999"
      :centered="true"
      :width="300"
    >
      <div style="padding: 20px">
        <RadioGroup v-model:value="appId">
          <Radio :value="IsBindingAppMall.NO">未绑定</Radio>
          <Radio :value="IsBindingAppMall.YES">已绑定</Radio>
        </RadioGroup>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { getBasicColumns } from './tableData';
  import { getShopInfoList, bindAppid } from '@/api/hby/merchantPlatform/index';
  import { Image, Modal, Button, RadioGroup, Radio, Tooltip } from 'ant-design-vue';
  import { useModal } from '@/components/Modal';
  import { IShopInfo } from '@/api/hby/merchantPlatform/type';
  import OpenGoods from './openGoods.vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useRouter } from 'vue-router';
  import { IsBindingAppMall } from '@/enums/merchantPlatformEnum';
  const router = useRouter();
  const visible = ref(false);
  const confirmLoading = ref(false);
  const id = ref<string>('');
  const appId = ref<IsBindingAppMall>(IsBindingAppMall.NO);
  const { createMessage } = useMessage();

  const openBind = (row: IShopInfo) => {
    id.value = row.id;
    appId.value = row.appId === '1' ? IsBindingAppMall.YES : IsBindingAppMall.NO;
    visible.value = true;
  };

  const handleBind = async () => {
    try {
      await bindAppid({ id: id.value, appId: appId.value });
      createMessage.success({ content: '绑定成功' });
      reload();
    } finally {
      visible.value = false;
      confirmLoading.value = false;
    }
  };

  const [register, { openModal }] = useModal();
  const handleAdd = (type: number = 1, row?: IShopInfo) => {
    openModal(true, {
      type,
      row,
    });
  };
  const [registerTable, { reload }] = useTable({
    api: getShopInfoList,
    columns: getBasicColumns(),
    showIndexColumn: true,
    clickToRowSelect: false,
    useSearchForm: true,
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    formConfig: {
      labelWidth: 100,
      schemas: [
        {
          field: `keyWord`,
          label: `机构名称`,
          component: 'Input',
          colProps: {
            span: 6,
          },
        },
        {
          field: `[startTime, endTime]`,
          label: `创建时间`,
          component: 'RangePicker',
          componentProps: {
            format: 'YYYY-MM-DD HH:mm:ss',
            placeholder: ['开始时间', '结束时间'],
            showTime: { format: 'HH:mm:ss' },
          },
          colProps: {
            span: 8,
          },
        },
        // {
        //   field: `status`,
        //   label: `状态`,
        //   component: 'Select',
        //   componentProps: {
        //     fieldNames: { label: 'dictLabel', value: 'dictValue' },
        //     options: dicts.shopStatus,
        //   },
        //   colProps: {
        //     span: 4,
        //   },
        // },
      ],
    },
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
    },
    afterFetch: (data: IShopInfo[]) => {
      return data.map((item) => {
        return {
          ...item,
          merchantNo: item.merchantNo || '暂未绑定',
          appidText: item.appId === '0' ? '暂未绑定' : '已绑定',
        };
      });
    },
  });

  const handleToMerchant = (record: IShopInfo) => {
    router.push({
      name: 'memberMerchantNo',
      query: { tenantId: record.tenantId },
    });
  };
</script>

<style lang="less" scoped>
  .merchant-platform-container {
    .table-container {
      .image-text {
        display: flex;
        align-items: center;
        gap: 16px;

        .text {
          display: flex;
          flex-direction: column;
          flex: 1;
          span {
            align-self: self-start;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 180px;
          }
        }
      }
    }
  }
</style>
